<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <canvas id="canvas" width="400" height="300"></canvas>
  </div>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.style.border = '1px solid black'
    let circles = [], speed = 1,first = true

    window.onmousedown = function(e) {
      circles.push({x: e.clientX, y: e.clientY, r: 10, a: 0.5*Math.random()})
      if(first) {
        first = false
        draw()
      }
    }
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      circles.forEach((circle,index)=>{
        ctx.beginPath()
        ctx.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI);
        ctx.strokeStyle = `rgba(0,0,0,${1-circle.a})`
        ctx.stroke();
        circle.r += speed;
        circle.a += 0.01
        if(circle.a>=1) circles.splice(index,1)
      })
      requestAnimationFrame(draw)
    }
  </script>
</body>
</html>